<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文本、列表、表格、表单标签</title>
  </head>
  <body>
    <a href="http://www.baidu.com" target="_blank">百度</a><br />

    <b>仅仅为了加粗文本</b>
    <strong>语义化更强，表示该文本比较重要(文本阅读时会重读)</strong><br />

    <i>仅仅为了斜体文本</i>
    <em>加强语气，一般是搜索里面的关键字</em><br />

    <s>删除线（但是HTML5不在支持）</s>
    <del>建议使用</del><br />

    <u>下划线</u><br />

    <small>文本缩小</small>
    <big>文本放大</big><br />

    <p>文本<sup>上标</sup></p>
    <p>文本<sub>下标</sub></p>
    <br />

    <b
      ><i><u>综合</u></i></b
    ><br />

    <h2>有序列表</h2>
    <!-- 有序列表类型：A、a、I、i、1，
       start ：序列
   -->
    <ol type="A" start="9">
      <li><b>重点：</b>打开冰箱门</li>
      <li>把大象放进去</li>
      <li>关闭冰箱门</li>
    </ol>

    <h2>无序列表</h2>
    <!-- 
    type：设置列表项前面的符号
        disc : 实心圆点(默认)
        circle : 空心圆点
        square : 实心方块
        none : 无符号
   -->
    <ul type="circle">
      <li>打开冰箱门</li>
      <li>关闭冰箱门</li>
      <li>把大象放进去</li>
    </ul>

    <h2>自定义列表</h2>
    <dl>
      <dt>帮助中心</dt>
      <dd>订单管理</dd>
      <dd>订单操作</dd>
      <dd>账户管理</dd>
    </dl>
    <!-- 
    快捷键：
        h1{这是一级标题}
        h1{这是四个一级标题}*4
        h${这是$级标题}*6 : 递增效果
        h${这是$级标题}*6 : 递增效果
        ul>li{列表项}*5 : 生成5个列表项
  -->

    <!-- 
    两个空格：
          &nbsp; : 一个英文空格
          &emsp; : 一个中文空格
  -->
    <p>zhehswqwq</p>
    <p>&nbsp;zhehswqwq</p>
    <p>这是中文</p>
    <p>&emsp;这是中文</p>

    <!-- 
    cellspacing : 单元格之间的间距
    cellpadding : 单元格内容与单元格边框之间的间距
    border-collapse : 单元格边框合并
  -->
    <table
      border="1"
      width="500"
      height="150"
      cellspacing="0"
      cellpadding="0"
      align="center"
    >
      <!-- 
        align : 单元格水平对齐（默认左侧对齐）
        valign : 单元格垂直对齐（top、middle（默认）、bottom）
      -->
      <tr align="right" valign="bottom">
        <th>序号</th>
        <th>王者英雄</th>
        <th>王者性别</th>
        <th>所属位置</th>
        <th>详情</th>
      </tr>
      <tr>
        <td width="400">1</td>
        <td align="center" valign="top">亚瑟</td>
        <td>男</td>
        <td>边路</td>
        <td>战士</td>
      </tr>
      <tr>
        <td>2</td>
        <td rowspan="2">王昭君</td>
        <td>女</td>
        <td>中路</td>
        <td>法师</td>
      </tr>
      <tr>
        <td>3</td>
        <td>女</td>
        <td>中路</td>
        <td>法师</td>
      </tr>
      <tr>
        <td>3</td>
        <td colspan="4">总结</td>
      </tr>
    </table>

    <table width="600" height="600" align="center" border="1">
      <caption>
        表格显示
      </caption>

      <!-- 列分配颜色 -->
      <colgroup span="1" bgcolor="#91C5D4"></colgroup>
      <colgroup span="1" bgcolor="#9165D4"></colgroup>

      <thead>
        <tr>
          <th rowspan="2">内容头</th>
          <th colspan="5">展示头</th>
        </tr>
        <tr>
          <th colspan="5">展示头</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>躯干</td>
          <td>躯干</td>
          <td>躯干</td>
          <td>躯干</td>
          <td>躯干</td>
          <td>躯干</td>
        </tr>
        <tr>
          <td>躯干</td>
          <td>躯干</td>
          <td>躯干</td>
          <td>躯干</td>
          <td>躯干</td>
          <td>躯干</td>
        </tr>
        <tr>
          <td>躯干</td>
          <td>躯干</td>
          <td>躯干</td>
          <td>躯干</td>
          <td>躯干</td>
          <td>躯干</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>总结</td>
          <td colspan="5">展示总结</td>
        </tr>
      </tfoot>
    </table>

    <form action="">
      请输入姓名：<input type="text" /><br />
      请输入密码：<input type="password" /><br />

      请填写详细地址：<textarea cols="10" rows="3 "></textarea><br />

      单选：<input type="radio" name="sex" checked />男
      <input type="radio" name="sex" />女
      <input type="radio" name="sex" disabled />保密<br />

      多选：<input type="checkbox" />HTML <input type="checkbox" />CSS
      <input type="checkbox" />JAVASCRIPT
      <br />

      下拉框：<select>
        <option value="">1</option>
        <option value="">2</option>
        <option selected>3</option>
      </select>
      <br />
      下拉多选框：<select multiple size="6">
        <option value="">1</option>
        <option value="">2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
      </select>
      <br />

      文件选择：<input type="file" /><br />

      <label for="username">请输入姓名：</label>
      <input type="text" id="username" />
      <label for="number">您的手机号：</label>
      <input type="text" id="number" value="142****1144" readonly /><br />

      <!-- 
        fieldset : 可以单独设置，也可以放在form表单设置
        target : 开了新页面，原本数据仍在
      -->
      <form action="" target="_blank">
        <fieldset>
          <legend>基础信息</legend>
          <label for="f-username">请输入姓名：</label>
          <input type="text" id="f-username"/>
          <input type="submit" value="提交">
          <input type="reset" value="危险！清空">
          <input type="image" 
                 src="https://img1.baidu.com/it/u=1941754368,3189485105&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=749"
                 width="100"
                 height="100"
          ></input>
        </fieldset>
      </form>
    </form>
  </body>
</html>
